<template>
  <el-dialog
    :visible="visible"
    :title="isUpdate ? '编辑' : '新增'"
    @close="visible = false"
  >
    <el-form class="form">
      <el-form-item label="图片">
        <ImageUpload
          v-model="formData.coverImg"
          @setImage="setImage"
        />
      </el-form-item>
      <el-form-item label="文章标题">
        <el-input v-model="formData.title" />
      </el-form-item>
      <el-form-item label="文章分类">
        <el-select v-model="formData.categoryId">
          <el-option v-for="category in categoryList" :key="category.id" :label="category.name" :value="category.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="formData.summary" />
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker
          v-model="formData.startTime"
          type="datetime"
          placeholder="请选择时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="来源">
        <el-input v-model="formData.source" />
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="formData.author" />
      </el-form-item>
      <div style="border: 1px solid #ccc;">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :default-config="{}"
          mode="default"
        />
        <Editor
          v-model="formData.content"
          style="height: 500px; overflow-y: hidden;"
          :default-config="{ placeholder: '请输入内容...' }"
          mode="default"
          @onCreated="onCreated"
        />
      </div>
    </el-form>
    <el-button @click="visible = false">取 消</el-button>
    <el-button
      type="primary"
      @click="confirm"
    >确 定</el-button>
  </el-dialog>
</template>

<script>
import { getArticleById, saveArticle, updateArticle } from '@/api/article/article'
import { getAllArticleCategory } from '@/api/article/articleCategory'
import ImageUpload from '@/components/Upload/ImageUpload.vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  components: { ImageUpload, Editor, Toolbar },
  data() {
    return {
      visible: false,
      isUpdate: false,
      formData: {
        id: '',
        title: '',
        categoryId: '',
        summary: '',
        coverImg: '',
        author: '',
        startTime: '',
        content: ''
      },
      categoryList: [],
      editor: null
    }
  },
  methods: {
    async init(id) {
      this.visible = true
      // 获取文章分类选项
      const data = await getAllArticleCategory()
      this.categoryList = data.data
      if (id != null) {
        this.isUpdate = true
        const data = await getArticleById(id)
        this.formData = data.data
      } else {
        this.isUpdate = false
        this.formData = {
          id: '',
          title: '',
          summary: '',
          categoryId: '',
          coverImg: '',
          author: '',
          startTime: '',
          content: ''
        }
      }
    },
    setImage(imageUrl) {
      this.formData.coverImg = imageUrl
    },
    onCreated(editor) {
      this.editor = Object.seal(editor)
    },
    confirm() {
      if (this.isUpdate) {
        this.handleConform(updateArticle, this.formData)
      } else {
        this.handleConform(saveArticle, this.formData)
      }
    },
    handleConform(operation) {
      operation(this.formData).then(response => {
        if (response.statusCode == 20000) {
          this.refresh()
          this.visible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '发生错误，操作失败',
            type: 'warning'
          })
        }
      })
    },
    refresh() {
      this.$emit('refresh')
    }
  }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.form{
  margin-bottom: 20px;
}
</style>
